
<template>
  <div class="suspension-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="悬浮图标">
        <ImageUpload
          v-model="data.image"
          :limit="1"
          :file-size="5"
          file-type="['jpg', 'jpeg', 'png', 'gif']"
        />
      </el-form-item>

      <el-form-item label="图标大小">
        <el-slider 
          v-model="data.size" 
          :min="24" 
          :max="80" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="垂直位置">
        <el-slider 
          v-model="data.position" 
          :min="0" 
          :max="100" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="水平位置">
        <el-slider 
          v-model="data.right" 
          :min="0" 
          :max="100" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="层级">
        <el-input-number 
          v-model="data.zIndex" 
          :min="1" 
          :max="9999" 
          size="small"
        />
      </el-form-item>

      <el-form-item label="显示内容">
        <el-switch v-model="data.showContent" />
      </el-form-item>

      <template v-if="data.showContent">
        <el-form-item label="悬浮内容">
          <el-input
            v-model="data.content"
            type="textarea"
            :rows="3"
            placeholder="请输入悬浮内容，支持HTML"
          />
        </el-form-item>

        <el-form-item label="内容宽度">
          <el-slider 
            v-model="data.contentWidth" 
            :min="100" 
            :max="400" 
            show-input 
            input-size="small"
          />
        </el-form-item>

        <el-form-item label="背景颜色">
          <el-color-picker v-model="data.contentBackgroundColor" />
        </el-form-item>

        <el-form-item label="边框颜色">
          <el-color-picker v-model="data.contentBorderColor" />
        </el-form-item>

        <el-form-item label="圆角大小">
          <el-slider 
            v-model="data.contentBorderRadius" 
            :min="0" 
            :max="20" 
            show-input 
            input-size="small"
          />
        </el-form-item>

        <el-form-item label="内边距">
          <el-slider 
            v-model="data.contentPadding" 
            :min="0" 
            :max="20" 
            show-input 
            input-size="small"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.suspension-panel {
  padding: 10px;
}
</style>
